<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>animate2</title>
		<link rel="stylesheet" type="text/css" href="swiper-3.4.2.min.css"/>
		<link rel="stylesheet" type="text/css" href="animate.min.css"/>
		<!--Swiper3.0.4-->
<style>
* {
	margin: 0;
	padding: 0;
}
.blue-slide {
	background: #4390EE;
}
.swiper-slide {
	line-height: 300px;
	color: #fff;
	font-size: 36px;
	text-align: center;
}

</style>
	</head>
	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide blue-slide"><p class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" >内容</p></div>
			</div>
		</div>
	</body>
	<script src="swiper-3.4.2.min.js"></script>
	<script src="swiper.animate1.0.2.min.js"></script>
	<script>
		var mySwiper = new Swiper('.swiper-container',{
			onInit: function(swiper){
				swiperAnimateCache(swiper);
				swiperAnimate(swiper);
			},
			onSlideChangeEnd:function(swiper){
				swiperAnimate(swiper);
			}
		})
	</script>
</html>
